<template>
  <div>
    <!-- 位置栏 -->
    <div class="location-bar">
      <div>位置 :&ensp;</div>
      <div>一级页面</div>
      <div style="color: #000">/二级页面</div>
    </div>
    <!-- 查询框 -->
    <div class="search-bar">
      <a-form-model layout="inline" :model="searchForm" @submit="searchSubmit" @submit.native.prevent>
        <a-form-model-item label="新闻标题:">
          <a-input v-model="searchForm.title" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="状态">
          <a-select show-search placeholder="请选择" style="width: 150px" v-model="searchForm.status">
            <a-select-option value="上架">上架</a-select-option>
            <a-select-option value="下架">下架</a-select-option>
            <a-select-option value="未上架">未上架</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="所属栏目">
          <a-select show-search placeholder="请选择" style="width: 150px" v-model="searchForm.sectionId">
            <a-select-option v-for="(col, index) in column" :key="index" :value="col.id">
              {{ col.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 内容框 -->
    <div class="content-box">
      <div style="display: flex; justify-content: space-between; width: 380px">
        <a-button type="primary" @click="newlyAdded"> 新增 </a-button>
        <a-button type="primary" @click="batchShelves">批量上架</a-button>
        <a-button type="primary" @click="unbatchShelves">批量下架</a-button>
        <a-button type="primary" @click="batchDels">批量删除</a-button>
      </div>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="data"
        @change="handleTableChange"
        :pagination="pagination"
        :rowKey="(columns) => columns.id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="sectionId" slot-scope="text">
          <!-- {{ column.length > 0 ? column[text - 1].title : null }} -->
          <template v-for="(col, index) in column">
            <span v-if="col.id == text ? true : false" :key="index">{{ col.title }}</span>
          </template>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="modify(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="check(record)">查看</a>
          <a-divider type="vertical" />
          <a @click="shelves(record)" v-if="record.status == '下架' || record.status == '未上架' ? true : false">上架</a>
          <a @click="unshelves(record)" v-if="record.status == '上架' ? true : false">下架</a>
          <a-divider type="vertical" />
          <a @click="del(record)">删除</a>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
/**表头信息 */
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '新闻标题',
    dataIndex: 'title',
    key: 'title',
    scopedSlots: { customRender: 'title' },
  },
  {
    title: '所属栏目',
    dataIndex: 'sectionId',
    key: 'sectionId',
    scopedSlots: { customRender: 'sectionId' },
  },
  {
    title: '更新时间',
    key: 'updated',
    dataIndex: 'updated',
    scopedSlots: { customRender: 'updated' },
  },
  {
    title: '上架时间',
    key: 'publishDate',
    dataIndex: 'publishDate',
    scopedSlots: { customRender: 'publishDate' },
  },
  {
    title: '下架时间',
    key: 'unPublishDate',
    dataIndex: 'unPublishDate',
    scopedSlots: { customRender: 'unPublishDate' },
  },
  {
    title: '状态',
    key: 'status',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  components: {},
  data() {
    return {
      columns,
      data: [],
      column: [], //一级栏目
      selectedRowKeys: [], //多选id
      newIds: [], //编辑id
      searchForm: { title: '', status: undefined, sectionId: undefined }, //查询参数
      pagination: { pageSize: 10, total: 100, pageNum: 1, showSizeChanger: true }, //分页参数
      del_id: [], //被删除id
    };
  },
  created() {
    this.getColumn();
    this.loadArticleList();
  },
  methods: {
    //读取一级栏目
    async getColumn() {
      let reqData = {};
      let getListUrl = `/section/list`;
      let result = await this.axios.get(getListUrl, reqData);
      this.column = result.data.data;
      console.log(this.column);
    },
    //读取文章列表
    async loadArticleList() {
      let reqData = { sectionId: this.searchForm.sectionId, title: this.searchForm.title, status: this.searchForm.status };
      let reqParam = { pageNumber: this.pagination.pageNum, pageSize: this.pagination.pageSize };
      let searchUrl = `/news/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      // console.log(result);
      this.data = result.data.data;
      this.pagination.total = result.data.total; //总数
      console.log(this.data);
      this.search_empty();
    },
    //上架接口
    async shelve() {
      let reqData = {};
      let reqParam = { newIds: this.newIds };
      let urlParam = `?newIds=${reqParam.newIds.join('&newIds=')}`;
      let shelveUrl = `/news/shelve${urlParam}`;
      let result = await this.axios.get(shelveUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.multi_empty();
    },
    //下架接口
    async unshelve() {
      let reqData = {};
      let reqParam = { newIds: this.newIds };
      let urlParam = `?newIds=${reqParam.newIds.join('&newIds=')}`;
      let unShelveUrl = `/news/unShelve${urlParam}`;
      let result = await this.axios.get(unShelveUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.multi_empty();
    },
    //删除接口
    async deleteList() {
      let reqData = {};
      let reqParam = { newIds: this.del_id };
      let urlParam = `?newIds=${reqParam.newIds.join('&newIds=')}`;
      let deleteUrl = `/news/delete${urlParam}`;
      let result = await this.axios.delete(deleteUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.multi_empty();
    },
    //搜索
    searchSubmit() {
      // console.log(this.searchForm);
      this.loadArticleList();
    },
    //分页
    handleTableChange(pagination) {
      this.pagination.pageNum = pagination.current;
      this.loadArticleList();
    },
    //编辑
    modify(record) {
      this.$router.push({
        name: 'NewsUpdate',
        params: {
          id: record.id, //携带文章编号
        },
      });
    },
    check(record) {
      this.$router.push({
        name: 'Newsdetails',
        params: {
          id: record.id, //携带文章编号
        },
      });
    },
    //删除
    del(record) {
      // console.log(record)
      this.del_id = [record.id];
      // console.log(this.del_id);
      this.deleteList();
    },
    //上架
    shelves(record) {
      this.newIds = [record.id];
      // console.log(this.newIds)
      this.shelve();
    },
    //下架
    unshelves(record) {
      this.newIds = [record.id];
      // console.log(this.newIds)
      this.unshelve();
    },
    //新增
    newlyAdded() {
      this.$router.push({
        name: 'Newsadd',
      });
    },
    //批量删除
    batchDels() {
      this.del_id = this.selectedRowKeys;
      console.log(this.newIds);
      this.deleteList();
    },
    //批量上架
    batchShelves() {
      // console.log(this.selectedRowKeys);
      this.newIds = this.selectedRowKeys;
      console.log(this.newIds);
      this.shelve();
    },
    //批量下架
    unbatchShelves() {
      this.newIds = this.selectedRowKeys;
      // console.log(this.newIds);
      this.unshelve();
    },
    //多选
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    //清空多选
    multi_empty() {
      this.selectedRowKeys = [];
    },
    //搜索清空
    search_empty() {
      this.searchForm.title = '';
      this.searchForm.status = undefined;
      this.searchForm.sectionId = undefined;
    },
  },
};
</script>

<style>
.location-bar {
  display: flex;
  font-size: 14px;
  color: #88898b;
}
.search-bar {
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  margin-top: 17px;
  box-sizing: border-box;
  padding: 20px 30px;
}
.content-box {
  width: 100%;
  background-color: #ffffff;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 20px 30px;
}
</style>